
import React from 'react'
import {useLocation, useNavigate} from "react-router-dom"
import { Image } from 'react-vant';
import { ActionBar } from 'react-vant'
import { CartO, ChatO, ShopO } from '@react-vant/icons'
import {useDispatch,useSelector} from "react-redux"
import * as action from "../action"

 function Deatil() {
  let dispacth = useDispatch()
  let navigate = useNavigate()
  let {state} = useLocation()

  let addShop = (item)=>{
      dispacth(action.addshop(item))
  }
 
  return (
    <div>
       {
         state ? <div>
           <Image src={state.img}></Image>
           <h3>商品名:{state.tit}</h3>
           <h4>描述:{state.des}</h4>

         </div>:"暂无数据"
       }
       <div className='demo-action-bar'>
      <ActionBar>
        <ActionBar.Icon
          icon={<ChatO />}
          text='客服'
          onClick={() => console.log('chat click')}
        />
        <ActionBar.Icon
          icon={<CartO />}
          text='购物车'
          onClick={() => navigate("/home/shopcar") }
        />
        <ActionBar.Icon
          icon={<ShopO />}
          text='店铺'
          onClick={() => console.log('shop click')}
        />
        <ActionBar.Button
          type='danger'
          text='加入购物车'
          onClick={() => {addShop(state)}}
        />
      </ActionBar>
    </div>
    </div>
  )
}

export default Deatil